<template>
  <div class="hospitalSide-invoice-receivable">
    <!-- 搜索 -->
    <div class="header">
      <m-search
        ref="SearchForm"
        label-width="66px"
        :data="SEARCH_DATA"
        @searchForm="onSearch"
        @resetForm="onReset"
      />
    </div>
    <!-- tab状态 -->
    <div class="tab">
      <tabs
        :tabs-arr="TAB_ARR"
        :active-index="auditStatus"
        @returnIndex="onHandletabs"
      >
        <el-button
          :disabled="!table.dataList.length"
          type="primary"
          @click="onDownload"
        >
          <m-iconfont
            classify="m-pc-public"
            icon="m-pc-public_daocsj"
            size="14"
          /><span>导出数据</span>
        </el-button>
      </tabs>
    </div>
    <!-- 列表 -->
    <m-editable
      v-loading="table.tableLoading"
      :empty-type="table.resultType"
      :data="table.dataList"
      :columns="COLUMNS_TABLE"
      height="400"
    >
      <template slot="default-action" slot-scope="scope">
        <el-button
          type="primary"
          plain
          size="mini"
          @click.stop="toDetails(scope.row)"
          >查看</el-button
        >
      </template>
    </m-editable>
    <!-- 分页模块 -->
    <div v-if="table.dataList.length > 0" class="footer">
      <el-pagination
        class="pageBox"
        align="right"
        :page-size="page.size"
        :current-page="page.curPage"
        :total="page.total"
        :layout="page.PAGINATION_LAYOUT"
        :page-sizes="page.PAGE_NUMBER"
        @size-change="onPageSizeChange"
        @current-change="onPageCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common';
import tabs from '@pc/m-components/m-tabs/index.vue';
import {
  hospitalReceiveInvoiceList,
  hospitalReceiveInvoiceStatistics,
  exportReceiveInvoiceHsp,
} from '@api/hossyn-order-center';
import { $loadFileSimply } from '@pc/const/loadFileOps';
import { fileDownload } from '@pc/const/utils';
import { formatDate } from '@const/filter.js';
import * as CONSTS from './const';

export default {
  components: {
    tabs,
  },
  data() {
    return {
      ...CONSTS,
      auditStatus: 0,
      table: {
        searchData: {},
        tableLoading: false,
        resultType: 0,
        dataList: [],
      },
      page: {
        PAGE_NUMBER, // 页码数组
        PAGINATION_LAYOUT, // 页码功能布局
        curPage: 1,
        pageSize: PAGE_NUMBER[0],
        total: 0,
      },
    };
  },
  mounted() {
    this.getDataList();
    // this.getInvoiceStatistics();
  },
  methods: {
    // 下载数据
    onDownload() {
      const params = {
        url: exportReceiveInvoiceHsp,
        method: 'post',
        data: {
          ...this.table.searchData,
          billingStatus: this.TAB_ARR[this.auditStatus].val,
        },
      };
      const timeStr = formatDate(new Date(), 'YYYYMMDDHHmmss');
      $loadFileSimply(params).then((res) => {
        fileDownload(res, `查询导出${timeStr}.xls`);
      });
    },
    // 获取统计小红点
    getInvoiceStatistics() {
      this.$axios({
        url: hospitalReceiveInvoiceStatistics,
        method: 'post',
      }).then((res) => {
        const statisticsArr = res.data.payload || [];
        statisticsArr.forEach((it) => {
          this.TAB_ARR.forEach((item) => {
            const tabItem = item;
            if (tabItem.val === it.status && it.num) {
              tabItem.badge = it.num || '';
            }
          });
        });
      });
    },
    // 获取列表数据
    getDataList(flage) {
      this.table.tableLoading = true;
      this.$axios({
        url: hospitalReceiveInvoiceList,
        method: 'post',
        data: {
          ...this.table.searchData,
          billingStatus: this.TAB_ARR[this.auditStatus].val,
          page: this.page.curPage,
          pageSize: this.page.pageSize,
        },
      })
        .then((res) => {
          this.table.dataList = res.data.payload.content || [];
          this.page.total = res.data.payload.totalElements || 0;
          if (flage) {
            this.table.resultType = 1;
          } else {
            this.table.resultType = 0;
          }
        })
        .finally(() => {
          this.table.tableLoading = false;
        });
    },
    // 查看
    toDetails(row) {
      this.$router.push({
        path: '/hospitalSide/invoice-management/invoice-details',
        query: {
          settleOrderId: row.settleOrderMainId,
          settleOrderCode: row.settleOrderMainCode,
        },
      });
    },
    // 搜索
    onSearch(condition) {
      this.page.curPage = 1;
      this.table.searchData = condition;
      this.getDataList('search');
      // this.getInvoiceStatistics();
    },
    // 重置
    onReset(condition) {
      this.page.curPage = 1;
      this.table.searchData = condition;
      this.getDataList();
      // this.getInvoiceStatistics();
    },
    // tab切换事件
    onHandletabs(val) {
      this.page.curPage = 1;
      this.auditStatus = val;
      this.getDataList();
      // this.getInvoiceStatistics();
    },
    // 点击分页事件
    onPageSizeChange(size) {
      this.page.pageSize = size;
      this.getDataList();
      // this.getInvoiceStatistics();
    },
    onPageCurrentChange(curPage) {
      this.page.curPage = curPage;
      this.getDataList();
      // this.getInvoiceStatistics();
    },
  },
};
</script>
<style lang="less">
.hospitalSide-invoice-receivable {
  margin: 0 20px 10px 20px !important;
  display: flex;
  flex-direction: column;
  .tab {
    margin-bottom: 20px;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    // border-bottom: 1px solid @cutOffRuleColor;
  }
  .footer {
    padding: 7px 26px 6px 0;
    border: 1px solid @cutOffRuleColor;
    border-top: none;
    border-radius: 0 0 3px 3px;
  }
}
</style>
